<template>
  <div style="height: 100%;">
    <div
      class="aside-logo"
      @click="toIndex">
      <img v-lazy="'/images/logo.png'">
      <h3>DB Design</h3>
    </div>
    <el-menu
      :default-active="activeMenu"
      class="nav-menu">
      <el-menu-item
        index="SYS_CONF"
        @click="menuClick({code: 'SYS_CONF', href: '/db/design/dbType'})">系统设置</el-menu-item>
      <el-menu-item
        index="DATA_BASE"
        @click="menuClick({code: 'DATA_BASE', href: '/'})">数据库</el-menu-item>
    </el-menu>
    <el-menu class="user-menu">
      <el-menu-item
        index="user">
        <div class="mini-photo">
          <img v-lazy="'/images/logo.png'">
        </div>
        <h3>东方浩星传媒科技有限公司</h3>
      </el-menu-item>
      <el-menu-item index="msg">
        <el-badge
          :value="3"
          class="item">
          <i class="iconfont">&#xe629;</i>
        </el-badge>
      </el-menu-item>
      <el-menu-item
        index="sett"
        style="padding-left: 15px;">
        <i class="iconfont">&#xe60b;</i>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import Mixin from '@/assets/mixin'
export default {
  name: 'XHeader',
  mixins: [Mixin],
  doNotInit: true,
  data() {
    return {
      activeMenu: 'DATA_BASE'
    }
  },
  methods: {
    toIndex: function() {
      this.$router.push('/')
      // this.$store.commit('setActiveMenu', menu.code)
      this.setLocalData('activeMenu', 'DATA_BASE', 'setActiveMenu')
      // this.$router.push(menu.href)
    },
    menuClick: function(menu) {
      this.setLocalData('activeMenu', menu.code, 'setActiveMenu')
      this.$router.push(menu.href)
    },
    init: function() {
      this.activeMenu = this.getLocalData('activeMenu')
        ? this.getLocalData('activeMenu')
        : 'DATA_BASE'
      console.log(this.activeMenu)
      this.setLocalData('activeMenu', this.activeMenu, 'setActiveMenu')
    }
  }
}
</script>

<style scoped>
</style>
